import React, { useState } from 'react';
import { Input, Button, List } from 'antd';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [doneTodos, setDoneTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleAddTodo = () => {
    if (inputValue.trim()) {
      setTodos([...todos, inputValue.trim()]);
      setInputValue('');
    }
  };

  const handleTodo = (index) => {
    const todo = todos[index];
    setTodos(todos.filter((_, i) => i !== index));
    setDoneTodos([...doneTodos, todo]);
  };

  const undoTodo = (index) => {
    const doneTodo = doneTodos[index];
    setDoneTodos(doneTodos.filter((_, i) => i !== index));
    setTodos([...todos, doneTodo]);
  };

  return (
    <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
      <h1>Todo List</h1>
      <Input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder="Add a new todo"
        style={{ width: '300px', marginRight: '10px' }}
      />
      <Button type="primary" onClick={handleAddTodo}>
        Add
      </Button>
      <h2>待办任务</h2>
      <List
        style={{ marginTop: '20px' }}
        bordered
        dataSource={todos}
        renderItem={(item, index) => (
          <List.Item>
            {item}
            <Button type="primary" onClick={() => handleTodo(index)} style={{ marginLeft: '10px' }}>
              处理
            </Button>
          </List.Item>
        )}
      />
      <h2>已办任务</h2>
      <List
        style={{ marginTop: '20px' }}
        bordered
        dataSource={doneTodos}
        renderItem={(item, index) => (
          <List.Item>
            {item}
            <Button type="primary" onClick={() => undoTodo(index)} style={{ marginLeft: '10px' }}>
              撤回
            </Button>
          </List.Item>
        )}
      />
    </div>
  );
};

export default TodoList;